<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="top-tabar">
			<view class="arrow" @click="returing"></view>
			<view class="title-tbar">
				导航
			</view>
			<!-- 添加一个空的占位元素保持平衡 -->
			<view class="placeholder"></view>
		</view>

		<view class="total-con">
			<!-- 维修方式 -->
			<view class="card">
				<view class="section-title">维修方式</view>
				<view class="repair-method">
					<view class="method-option" :class="{ selected: repairMethod === '到店维修' }"
						@click="repairMethod = '到店维修'">
						<view class="method-icon">
							<uni-icons type="shop" size="24" color="#007AFF"></uni-icons>
						</view>
						<text class="method-text">到店维修</text>
					</view>
					<view class="method-option" :class="{ selected: repairMethod === '上门取车' }"
						@click="repairMethod = '上门取车'">
						<view class="method-icon">
							<uni-icons type="car" size="24" color="#007AFF"></uni-icons>
						</view>
						<text class="method-text">上门取车</text>
					</view>
				</view>
			</view>

			<!-- 客户信息 -->
			<view class="card">
				<view class="section-title">客户信息</view>

				<view class="form-item">
					<view class="label">车主姓名</view>
					<input class="input" v-model="formData.ownerName" placeholder="请输入车主姓名"
						placeholder-class="placeholder" />
				</view>

				<view class="form-item">
					<text class="label">联系方式</text>
					<input class="input" v-model="formData.contact" placeholder="请输入联系方式"
						placeholder-class="placeholder" type="number" />
				</view>

				<view class="form-item">
					<text class="label">预约时间</text>
					<picker mode="date" :value="formData.appointmentDate" @change="onDateChange" class="picker">
						<view class="picker-text">{{ formData.appointmentDate || '请选择预约日期' }}</view>
					</picker>
					<picker mode="time" :value="formData.appointmentTime" @change="onTimeChange" class="picker">
						<view class="picker-text">{{ formData.appointmentTime || '请选择预约时间' }}</view>
					</picker>
				</view>

				<view v-if="repairMethod == '上门取车'" class="form-item">
					<view class="label">取车位置</view>
					<input class="input" v-model="formData.carposition" placeholder="请输入取车位置"
						placeholder-class="placeholder" />
				</view>
			</view>

			<!-- 车辆信息 -->
			<view class="card">
				<view class="section-title">车辆信息</view>

				<view class="form1-item">
					<text class="label1">车辆类型</text>
					<picker mode="selector" style="width: 500rpx;" :range="vehicleTypes" @change="onVehicleTypeChange"
						class="picker">
						<view class="picker-text">{{ formData.vehicleType || '请选择' }}</view>
					</picker>
				</view>

				<view class="form-item">
					<text class="label">车牌号</text>
					<input class="input" v-model="formData.plateNumber" placeholder="请输入车牌号"
						placeholder-class="placeholder" />
				</view>
			</view>

			<!-- 照片上传 -->
			<view class="card">
				<view class="section-title">照片</view>

				<view class="photo-section">
					<text class="photo-label">整车照片：</text>
					<view class="photo-upload">
						<view class="upload-btn" @click="uploadWholeCarPhoto">
							<uni-icons type="plus" size="30" color="#999"></uni-icons>
							<text class="upload-text">上传照片</text>
						</view>
						<view class="photo-preview" v-if="wholeCarPhotos.length > 0">
							<image v-for="(photo, index) in wholeCarPhotos" :key="index" :src="photo"
								class="preview-image" mode="aspectFill" @click="previewImage(photo)" />
							<view class="remove-btn" @click="removeWholeCarPhoto(index)">
								<uni-icons type="close" size="16" color="#fff"></uni-icons>
							</view>
						</view>
					</view>
				</view>

				<view class="photo-section">
					<text class="photo-label">维修部位照片：</text>
					<view class="photo-upload">
						<view class="upload-btn" @click="uploadRepairPartPhoto">
							<uni-icons type="plus" size="30" color="#999"></uni-icons>
							<text class="upload-text">上传照片</text>
						</view>
						<view class="photo-preview" v-if="repairPartPhotos.length > 0">
							<image v-for="(photo, index) in repairPartPhotos" :key="index" :src="photo"
								class="preview-image" mode="aspectFill" @click="previewImage(photo)" />
							<view class="remove-btn" @click="removeRepairPartPhoto(index)">
								<uni-icons type="close" size="16" color="#fff"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" @click="handleSubmit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const returing = () => {
		uni.navigateBack()
	}

	// 维修方式
	const repairMethod = ref('到店维修')



	// 表单数据
	const formData = reactive({
		ownerName: '',
		contact: '',
		carposition: '',
		appointmentDate: '',
		appointmentTime: '',
		vehicleType: '',
		plateNumber: ''
	})

	// 车辆类型选项
	const vehicleTypes = ref(['轿车', 'SUV', 'MPV', '跑车', '货车', '其他'])

	// 照片数据
	const wholeCarPhotos = ref([])
	const repairPartPhotos = ref([])

	// 日期选择
	const onDateChange = (e) => {
		formData.appointmentDate = e.detail.value
	}

	// 时间选择
	const onTimeChange = (e) => {
		formData.appointmentTime = e.detail.value
	}

	// 车辆类型选择
	const onVehicleTypeChange = (e) => {
		formData.vehicleType = vehicleTypes.value[e.detail.value]
	}

	// 上传整车照片
	const uploadWholeCarPhoto = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				wholeCarPhotos.value = wholeCarPhotos.value.concat(res.tempFilePaths)
			}
		})
	}

	// 上传维修部位照片
	const uploadRepairPartPhoto = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				repairPartPhotos.value = repairPartPhotos.value.concat(res.tempFilePaths)
			}
		})
	}

	// 删除整车照片
	const removeWholeCarPhoto = (index) => {
		wholeCarPhotos.value.splice(index, 1)
	}

	// 删除维修部位照片
	const removeRepairPartPhoto = (index) => {
		repairPartPhotos.value.splice(index, 1)
	}

	// 预览图片
	const previewImage = (url) => {
		uni.previewImage({
			urls: [url],
			current: 0
		})
	}

	// 提交表单
	const handleSubmit = () => {
		// 表单验证
		if (!formData.ownerName) {
			uni.showToast({
				title: '请输入车主姓名',
				icon: 'none'
			})
			return
		}

		if (!formData.contact) {
			uni.showToast({
				title: '请输入联系方式',
				icon: 'none'
			})
			return
		}

		if (!formData.vehicleType) {
			uni.showToast({
				title: '请选择车辆类型',
				icon: 'none'
			})
			return
		}

		if (!formData.plateNumber) {
			uni.showToast({
				title: '请输入车牌号',
				icon: 'none'
			})
			return
		}

		// 提交数据
		const submitData = {
			repairMethod: repairMethod.value,
			...formData,
			wholeCarPhotos: wholeCarPhotos.value,
			repairPartPhotos: repairPartPhotos.value
		}

		console.log('提交数据:', submitData)

		uni.showLoading({
			title: '提交中...'
		})

		// 模拟提交
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '预约成功',
				icon: 'success'
			})

			// 重置表单
			resetForm()
		}, 1500)
		uni.navigateTo({
			url:'/pages/VehicleMaintenance/NearbyStores/appointResult/appointResult'
		})
		
	}

	// 重置表单
	const resetForm = () => {
		repairMethod.value = '到店维修'
		Object.keys(formData).forEach(key => {
			formData[key] = ''
		})
		wholeCarPhotos.value = []
		repairPartPhotos.value = []
	}

	onLoad(() => {
		console.log('页面加载')
	})
</script>

<style scoped>
	.container {
		/* padding: 20rpx; */
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.title-tbar {
		color: white;
		font-size: 36rpx;
		text-align: center;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.top-tabar {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		background-color: #3486fd;
		height: 320rpx;
		padding: 20rpx;
		position: relative;
	}

	.arrow {
		border-top: 2rpx solid white;
		border-right: 2rpx solid white;
		height: 17rpx;
		width: 17rpx;
		margin-top: 15rpx;
		transform: rotate(225deg);
		flex-shrink: 0;
		z-index: 10;

		/* 添加点击效果 */
		&:active {
			opacity: 0.7;
			transform: rotate(225deg) scale(0.95);
		}
	}

	.placeholder {
		/* width: 20rpx;
		height: 20rpx;
		visibility: hidden; */
	}

	.header {
		text-align: center;
		padding: 40rpx 0;
		color: white;
		background-color: #007AFF;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.card {
		/* position: relative; */
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.total-con {
		position: relative;
		padding: 20rpx;
		margin-top: -250rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f2f5;
	}

	.repair-method {
		display: flex;
		gap: 20rpx;
	}

	.method-option {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		border: 2rpx solid #e8e8e8;
		border-radius: 16rpx;
		transition: all 0.3s;
	}

	.method-option.selected {
		border-color: #007AFF;
		background-color: #f0f9ff;
	}

	.method-icon {
		margin-bottom: 16rpx;
	}

	.method-text {
		font-size: 28rpx;
		color: #333;
	}

	.form-item {
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.label {
		display: block;
		font-size: 28rpx;
		/* color: #333; */
		color: white;
		border-radius: 30rpx;
		padding: 10rpx;
		margin-bottom: 16rpx;
		font-weight: 500;
		background-color: #3385fc;
	}

	.input {
		width: 70%;
		height: 80rpx;
		padding: 0 24rpx;
		border: 2rpx solid #e8e8e8;
		border-radius: 12rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	.label1 {
		display: block;
		font-size: 28rpx;
		/* color: #333; */
		color: white;
		border-radius: 30rpx;
		padding: 10rpx;
		margin-bottom: 16rpx;
		font-weight: 500;
		background-color: #3385fc;

	}

	.form1-item {
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.placeholder {
		color: #999;
		font-size: 28rpx;
	}

	.picker {
		margin-bottom: 16rpx;
	}

	.picker-text {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 24rpx;
		border: 2rpx solid #e8e8e8;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #333;
	}

	.picker-text:empty::before {
		content: attr(data-placeholder);
		color: #999;
	}

	.photo-section {
		margin-bottom: 40rpx;
	}

	.photo-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
		font-weight: 500;
	}

	.upload-btn {
		width: 200rpx;
		height: 200rpx;
		border: 2rpx dashed #d9d9d9;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999;
	}

	.upload-text {
		font-size: 24rpx;
		margin-top: 16rpx;
		color: #999;
	}

	.photo-preview {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.preview-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		position: relative;
	}

	.remove-btn {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: #ff4757;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #007AFF, #0056CC);
		color: #fff;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin: 40rpx 0;
		border: none;
	}

	.submit-btn:active {
		opacity: 0.8;
	}
</style>